<template>
    <div class="content">
        <div class="title">
            <h3>智慧安保<span>Smart security</span></h3>
        </div>
        <div class="small-title title-pd">
            <h3>值班人员信息</h3>
        </div>
        <div class="staff">
            <swiper :options="swiperOption">
                <swiper-slide v-for="(item, index) in SecurityInfo" :key="index">
                    <div @click="staffShow(index)" class="face-box">
                        <div class="face">
                            <img :src="item.portrait" />
                        </div>
                        <p>{{ item.name }}</p>
                    </div>
                </swiper-slide>
            </swiper>
            <div class="swiper-pagination"></div>
        </div>
        <div class="patrol">
            <ul>
                <li>
                    <div class="patrol-left">
                        <p>保安A：在图书馆巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安B：在南门巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安C：在8栋教学楼巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安D：在西门巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安D：在西门巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安D：在西门巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安D：在西门巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
                <li>
                    <div class="patrol-left">
                        <p>保安D：在西门巡逻</p>
                        <span>08:00</span>
                    </div>
                    <div class="patrol-right">
                        <span class="normal">正常</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="staff-info" v-if="isstaff">
            <div class="staff-content">
                <div class="portrait">
                    <img src="/haiyuan/static/baoan.jpg" draggable="false" />
                </div>
                <div class="info">
                    <div>编号：1001</div>
                    <div>性别：男</div>
                    <div>年龄：30</div>
                    <div>手机号： 13580556452</div>
                    <div>地址： 育才路1号</div>
                    <div>值班时间：08:00-17:00</div>
                    <div class="clock">
                        <div class="time-container">
                            <div class="time">
                                <div>
                                    <p>22H</p>
                                </div>
                            </div>
                        </div>
                        <div class="clockIn">已打卡</div>
                    </div>
                </div>
            </div>
            <div class="name">保安A</div>
            <div class="staff-close" @click="hideInfo">
                <font-awesome-icon class="icon-times close" :icon="['fas', 'times']" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isstaff: '', //保安信息显示
            SecurityInfo: [
                {
                    id: '001',
                    name: '保安A',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '002',
                    name: '保安B',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '003',
                    name: '保安C',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '004',
                    name: '保安D',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '005',
                    name: '保安E',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '006',
                    name: '保安F',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '007',
                    name: '保安H',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
                {
                    id: '008',
                    name: '保安G',
                    portrait: '/haiyuan/static/touxiang.jpg',
                    sex: '男',
                    phone: '13012546896',
                    address: '育才路君和君泰',
                    work: '08:00',
                    endwork: '17:30',
                },
            ],
            swiperOption: {
                autoplay: false,
                slidesPerView: 4,
                slidesPerGroup: 4,
                pagination: '.swiper-pagination',
                paginationType: 'progress',
                paginationClickable: true,
            },
        }
    },
    methods: {
        // 点击头像显示信息
        staffShow(index) {
            this.isstaff = index + 1
        },
        hideInfo() {
            this.isstaff = false
        },
    },
    mounted() {},
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.content {
    width: 350px;
    padding-right: 15px;
    margin-top: 30px;
    .title-pd {
        margin-top: 10px;
    }
    .staff {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 20px;
        padding: 20px 0;
        position: relative;
        .swiper-pagination {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            border-radius: 10px;
            overflow: hidden;
        }
        .face-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .face {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                overflow: hidden;
                cursor: pointer;
                img {
                    // max-width: 100%;
                    max-height: 100%;
                }
            }
            p {
                padding: 3px 5px;
                font-size: 16px;
                border: 1px solid #fff;
                margin-top: 10px;
                text-align: center;
                color: #fff;
                background: #9499cf;
            }
        }
        .swiper-pagination {
            background: rgba(154, 153, 180, 0.6);
            /deep/ .swiper-pagination-progressbar {
                background-image: linear-gradient(to right, #68519f, #85c8e5);
            }
        }
    }
    .staff-info {
        width: 380px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background: rgba(55, 79, 126, 0.9);
        border-radius: 6px;
        // display: none;
        .staff-content {
            display: flex;
            justify-content: space-between;
            .portrait {
                width: 50%;
                padding: 6px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .info {
                width: 50%;
                display: flex;
                flex-direction: column;
                padding-left: 15px;
                padding: 6px;
                div {
                    font-size: 16px;
                    color: #fff;
                }
                .clock {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 10px 0;
                    .time-container {
                        width: 90px;
                        height: 80px;
                        display: flex;
                        align-items: flex-end;
                        justify-content: center;
                        .time {
                            width: 90px;
                            height: 60px;
                            border-radius: 10px 10px 55px 55px;
                            position: relative;
                            background-image: linear-gradient(to top, rgb(104, 81, 159), rgb(127, 245, 250));
                            div {
                                position: absolute;
                                bottom: 10px;
                                left: 10px;
                                width: 70px;
                                height: 70px;
                                color: #fff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                                border-radius: 50%;
                                background-image: radial-gradient(rgb(7, 9, 13), rgb(135, 168, 252));
                                border: 7px solid rgb(55, 79, 126);
                                p {
                                    margin: 5px 0;
                                    font-weight: 600;
                                }
                            }
                        }
                    }
                    .clockIn {
                        padding: 5px;
                        font-size: 16px;
                        border-radius: 6px;
                        margin-right: 10px;
                        background: rgb(129, 211, 248);
                    }
                }
            }
        }
        .name {
            width: 100%;
            padding: 8px;
            text-align: center;
            font-size: 20px;
            color: #333;
            background: #ddd;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }
        .staff-close {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 5px;
            right: 5px;
            border-radius: 50%;
            color: #fff;
            background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
            cursor: pointer;
        }
    }
    .patrol {
        width: 100%;
        height: 340px;
        margin-top: 25px;
        position: relative;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 4px;
            width: 10px;
            height: 100%;
            border-radius: 5px;
            background-image: linear-gradient(to right, #68519f, #85c8e5);
        }
        ul {
            padding-left: 20px;
            height: 340px;
            overflow-y: scroll;
            scrollbar-width: none;
            li {
                color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                position: relative;
                margin-bottom: 15px;
                transition: all 0.3s;
                cursor: pointer;
                &::before {
                    content: '';
                    width: 8px;
                    height: 8px;
                    background: #85c8e5;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -15px;
                }
                &:hover {
                    background: rgba(154, 153, 180, 0.6);
                }
                .patrol-left {
                    p {
                        font-size: 14px;
                    }
                    span {
                        font-size: 12px;
                    }
                }
                .patrol-right {
                    span {
                        display: block;
                        padding: 0 5px;
                        height: 20px;
                        line-height: 20px;
                        font-size: 12px;
                        background: rgb(146, 233, 251);
                    }
                }
            }
        }
        ul::-webkit-scrollbar {
            display: none;
        }
    }
}
</style>